import React, { Component } from 'react'
import './login.scss'
import { Form, Input, Button, Checkbox, message } from 'antd';
import { NavLink, Redirect } from 'react-router-dom'

import storageUtils from '../../utils/storageUtils'

import logo from '../../assets/logo.png'

import icon from '../../config/iconConfig'
import { connect } from 'react-redux';
import { login } from '../../redux/actions/user'
const IconFont = icon.icon()


class Login extends Component {
    autoLogin = (event) => {
        if (!event.target.checked) {
            storageUtils.removeUser();
        }
    }
    //处理表单数据
    handleSubmit = async (values) => {
        console.log('Received values of form: ', values);
        this.props.login(values)
    }
    render() {
        // 如果用户已经登陆, 自动跳转到管理界面
        const user = this.props.user
        if (user && user.data) {
            return <Redirect to='/' />
        }
        return (
            <div id="login">
                <header className="flex_start">
                    <div className="logo"><img src={logo} alt="" /></div>
                    <p className="title">金皮卡：后台管理系统</p>
                </header>
                <section>
                    <div className="bk"></div>
                    <div className="login-content">
                        <h2>用户登录</h2>
                        <Form
                            name="normal_login"
                            className="login-form"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={this.handleSubmit}
                        >
                            {
                                /*
                              用户名/密码的的合法性要求
                                1). 必须输入
                                2). 必须大于等于4位
                                3). 必须小于等于12位
                                4). 必须是英文、数字或下划线组成
                               */
                            }
                            <Form.Item
                                name="username"
                                rules={[
                                    { required: true, whitespace: true, message: '用户名必须输入' },
                                ]}
                            >
                                <Input prefix={<IconFont type="icon-yonghu" />} placeholder="用户名" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                rules={[
                                    { required: true, whitespace: true, message: '请输入密码' },
                                    // {validator: this.validatePwd}
                                ]}
                            >
                                <Input
                                    prefix={<IconFont type="icon-mima" />}
                                    type="password"
                                    placeholder="密码"
                                />
                            </Form.Item>
                            <Form.Item >
                                <div className="flex-between">
                                    <Form.Item name="remember" valuePropName="checked" noStyle>
                                        <Checkbox onChange={this.autoLogin} >自动登录</Checkbox>
                                    </Form.Item>
                                    <a className="login-form-forgot" href="">忘记密码</a>
                                </div>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">登录</Button> Or
                                <NavLink to="/signin"> 注册一个！</NavLink>
                            </Form.Item>
                        </Form>
                    </div>

                </section>
            </div>
        )
    }
}
export default connect(
    state => ({
        user: state.user
    }),
    { login }
)(Login)